import React, { Component } from 'react';

/* 
  事件传参
  1.bind
  2.箭头函数
  3.data属性传
  https://zh-hans.reactjs.org/docs/handling-events.htm
*/

class App extends Component {
  //  第一种bind/第二种箭头函数  ==>取参方式
  handleClick=(params,e)=>{
    console.log(params,e) //牛  事件源:SyntheticBaseEvent {_reactName: "onClick", _targetInst: null, type: "click", nativeEvent: MouseEvent, target: button, …}
  }

  // 第三种 data属性传==>取参方式
  // handleClick=(e)=>{
  //   console.log(e);
  //   console.log(e.currentTarget.dataset["index"])
  // }

  render() {
    return (
      <div>
        {/* 第一种bind */}
        <button onClick={this.handleClick.bind(this,"牛")}>传参</button>

        {/* 第二种箭头函数-页面更新会渲染两次页面,第一次清空,第二次传值 */} 
        {/* <button onClick={(e)=>{this.handleClick("牛",e);}}>传参</button> */}

        {/* 第三种 data属性传 */}
        {/* <button data-index={"牛"} onClick={this.handleClick}>传参</button> */}
      </div>
    );
  }
}

export default App;
